<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="/static/css/index_style.css"/>

        <link type="text/css" rel="stylesheet" href="/static/css/index.css" />
        		<link rel="stylesheet" type="text/css" href="/static/css/singer_style.css"/>

        <link rel="icon" href="/static/images/favicon.ico">
         <style>
            .pagenation{height:32px;text-align:center;font-size:0;margin:30px auto;}
            .pagenation a{display:inline-block;border:1px solid #fafafa;background-color: #fafafa;font-size:12px;padding:0 21px;color:#666;margin:5px;height: 50px;line-height: 50px}

            .pagenation .active{background-color: #fff;color:#43a200}
        </style>

	</head>
	<iframe src="{{ url('index:index') }}" width="100%" height="142px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes" style="display: block;"></iframe>
	<body id="main">
	<main class="albumMain">
	<div class="wrap">
		<div class="albumTag">
			<div class="albumChoose clearFix">
                <ul id="wa">
                    <li><a href="/album/1/all">全部</a></li>
                    <li><a href="/album/1/zh" class="active">内地</a></li>
                    <li><a href="/album/1/ea">欧美</a></li>
                    <li><a href="/album/1/kr">韩国</a></li>
                    <li><a href="/album/1/jp">日本</a></li>
                </ul>
			</div>

		</div>
{#        <div class="dkuang">#}
{#        <p class="one fl">全部</p>#}
		<section class="allAlbum">

			<ul class="albumList clearFix">
			{% for album in page_orders %}
                <li>
					<div class="albumImg">
						<a href="/albums_detail/?id={{ album.album_id }}">
							<img src="{{ album.album_pic }}" />
						</a>
						<a href="/albums_detail/?id={{ album.album_id }}" class="play"><span ></span></a>
					</div>
					<h3 class="albumName"><a href="/albums_detail/?id={{ album.album_id }}">{{ album.album_name }}</a></h3>
					<p class="albumSinger"><a href="/singers_detail/?id={{ album.album_singer_id }}">{{ album.album_singer }}</a></p>
					<p class="albumdata">{{ album.album_time }}</p>
					<a href="#" class="albumListIco"><span></span></a>
				</li>
            {% endfor %}

			</ul>
<div class="pagenation">
                    <div id="pagination" class="page"></div>
                </div>
		</section>

        </div>

{#    <div class="dkuang">#}
{#		<p class="one">内地</p>#}
{##}
{#        </div>#}
{#    <div class="dkuang">#}
{#		<p class="one fl">欧美</p>#}
{#        </div>#}
{#    <div class="dkuang">#}
{#		<p class="one fl">韩国</p>#}
{#        </div>#}
{#    <div class="dkuang">#}
{#		<p class="one fl">日本</p>#}
{#        </div>#}

{# <div class="pagenation">#}
{#        <div id="pagination" class="page"></div>#}
{#    </div>#}

{#    </div>#}
{#    </div>#}
    </main>



		<iframe src="{{ url('index:footer') }}" width="100%" height="600px" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" allowtransparency="yes" style="display: block;"></iframe>
        <script src="/static/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
    	<script src="/static/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="/static/user.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(function () {
        $('#pagination').pagination({
            currentPage: {{ page_num }},
            totalPage: {{ album_page}},
            callback: function (current) {
                location.href = '/album/' + current + '/' + 'zh' + '/';
            }
        })
    });
</script>
	</body>



</html>